<template>
  <div :class="['HCalendar']">
    <a-calendar :fullscreen="false" :header-render="headerRender" @change="change">
      <div slot="dateFullCellRender" slot-scope="value" class="date">
        <div class="canclick" @click="$emit('change', value)" :style="checkValueStyle(value)" v-if="data.length && data.map(e => e.value).includes(moment(value).format('YYYY-MM-DD'))">
          {{ moment(value).format('DD') }}
        </div>
        <div class="canclick" v-else @click="$emit('change', value)">
          <span v-if="isNowDateRange(value)">{{ moment(value).format('DD') }}</span>
          <span class="dd-disabled" v-else>{{ moment(value).format('DD') }}</span>
        </div>
      </div>
    </a-calendar>
    <div class="date-type-list">
      <div v-for="(item) in type" :key="item.key">
        <div class="circle" :style="item.style"></div>
        {{ item.label }}
      </div>
      <!-- <a-button class="date-look-all">导入值班表</a-button> -->
      <!-- <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :action="url"
        :headers="headers"
        @change="handleChange"
      >
        <a-button class="date-look-all"> 导入值班表 </a-button>
      </a-upload> -->

      <a-button class="date-look-all" @click="$emit('showExcel')"> 值班表管理 </a-button>
    </div>
  </div>
</template>
<script>
// import Vue from 'vue';
import moment from 'moment';
import { getDutyTime } from '@/api/dutyTime';
// import { SIGN } from '@/api/request';
// import { downloadExecl } from '@/api/oss';
// import storage from 'store';
// import { AESEncrypt } from '@/utils/utils';
// import { USERINFO, ACCESS_TOKEN } from '@/store/mutation-types';
// const info = Vue.ls.get(USERINFO);
export default {
  name: 'HCalendar',
  props: {
    // 早晚班数据 Array
    dateCheck: {
      type: Array,
      default: () => {
        return [
          {
            // 类型
            type: 'm',
            // 时间
            value: '2022-07-15'
          },
          {
            type: 'e',
            value: '2022-07-14'
          },
          {
            type: 'me',
            value: '2022-07-13'
          },
          {
            type: 'me',
            value: '2022-06-13'
          }
        ];
      }
    }
  },
  data() {
    return {
      moment,
      headers: {
        // ...SIGN,
        // 'X-Access-Token': AESEncrypt(Vue.ls.get(ACCESS_TOKEN)),
        // 'X-Access-UserId': AESEncrypt(info.uid)
      },
      url: '',
      action: '/web/duty/download',
      type: [
        // {
        //   key: 'm',
        //   label: '早班',
        //   style: {
        //     backgroundColor: '#CFEAE7'
        //   }
        // },
        // {
        //   key: 'e',
        //   label: '晚班',
        //   style: {
        //     backgroundColor: '#FEE3D0'
        //   }
        // },
        {
          key: 'me',
          label: '有纪录',
          style: {
            backgroundColor: '#1F3B8A',
            color: '#fff'
          }
        }
      ],
      data: [],
      nowYear: moment(new Date()).format('YYYY'),
      nowMonth: moment(new Date()).format('MM')
    };
  },
  created() {
    // this.url = (process.env.NODE_ENV == 'development' ? '/api' : process.env.VUE_APP_SERVER_URL) + this.action;
    this.refresh();
    // this.data = this.dateCheck.map(e => {
    //   const v = this.type.find(type => type.key == e.type);
    //   if (v) {
    //     return {
    //       style: v.style,
    //       value: e.value
    //     };
    //   }
    //   return {
    //     style: {},
    //     value: e.value
    //   };
    // });
    // console.log(this.data);
  },
  computed: {
    checkValueStyle() {
      return function(value) {
        const v = this.data.find(e => e.value == moment(value).format('YYYY-MM-DD'));
        if (v) {
          return v.style;
        }
      };
    },
    isNowDateRange() {
      return function(value) {
        const nowMonth = moment(value).format('MM');
        return nowMonth === this.nowMonth;
      };
    }
  },
  methods: {
    refresh() {
      this.getDutyTime(this.nowYear + '-' + this.nowMonth);
    },
    change(e) {
      console.log(e);
    },
    changeMonth(e) {
      console.log(e);
      this.getDutyTime(e);
    },
    handleChange({ file }) {
      console.log(file, 'file');
      if (file.response instanceof Object) {
        this.$message.success(file.response.msg);
        this.$emit('change');
      }
    },
    getDutyTime(time) {
      getDutyTime({
        time
      }).then(res => {
        // if (process.env.NODE_ENV == 'development') {
        //   res.data = [
        //     {
        //       'sum': '7',
        //       'time': '2022-08-13'
        //     }
        //   ];
        // }
        this.data = res.data.map(e => {
          const v = this.type.find(type => type.key == 'me');
          if (v) {
            return {
              style: v.style,
              value: e.time
            };
          }
          return {
            style: {},
            value: e.time
          };
        });
      });
    },
    headerRender({ value, type, onChange, onTypeChange }) {
      const start = 0;
      const end = 12;
      const monthOptions = [];

      const current = value.clone();
      const localeData = value.localeData();
      const months = [];
      for (let i = 0; i < 12; i++) {
        current.month(i);
        months.push(localeData.monthsShort(current));
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>
        );
      }
      const month = value.month();

      const year = new Date().getFullYear();
      const options = [];
      for (let i = year - 5; i <= year; i += 1) {
        options.unshift(
          <a-select-option key={i} value={i} class="year-item">
            {i}
          </a-select-option>
        );
      }
      return (
        <div style={{ paddingBottom: '10px' }}>
          <a-row type="flex" justify="end" gutter={10}>
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                class="my-year-select"
                onChange={newYear => {
                  const now = value.clone().year(newYear);
                  onChange(now);
                  this.changeMonth(newYear + '-' + this.nowMonth);
                }}
                value={String(value.year())}
              >
                {options}
              </a-select>
            </a-col>
            <a-col>
              <a-select
                size="small"
                dropdownMatchSelectWidth={false}
                value={String(month)}
                onChange={selectedMonth => {
                  const newValue = value.clone();
                  newValue.month(parseInt(selectedMonth, 10));
                  this.nowMonth = moment(newValue).format('MM');
                  onChange(newValue);
                  this.changeMonth(value.year() + '-' + this.nowMonth);
                }}
              >
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      );
    }
    // headerRender({ value, type, onChange, onTypeChange }) {
    //   const start = 0;
    //   const end = 12;
    //   const monthOptions = [];

    //   const current = value.clone();
    //   const localeData = value.localeData();
    //   let months = [];
    //   for (let i = 0; i < 12; i++) {
    //     current.month(i);
    //     months.push(localeData.monthsShort(current));
    //   }

    //   months = months.map(e => {
    //     const m = e.replace(/月/g, '');
    //     return String(m).length < 2 ? `0${m}` : String(m);
    //   });

    //   for (let index = start; index < end; index++) {
    //     monthOptions.push(
    //       <a-select-option class="month-item" key={`${index}`}>
    //         {months[index]}
    //       </a-select-option>
    //     );
    //   }
    //   let month = value.month();
    //   month = (String(month).length < 2 ? `0${month}` : String(month));
    //   const year = value.year();
    //   const options = [];
    //   for (let i = year - 10; i <= year; i += 1) {
    //     months.forEach(e => {
    //       if (Number(month) < Number(e) && year === i) {
    //         return;
    //       }
    //       options.unshift(
    //         <a-select-option key={i + '-' + e} value={i + '-' + e} class="year-item">
    //           {i}-{e}
    //         </a-select-option>
    //       );
    //     });
    //   }

    //   const nowDate = String(year) + '-' + month;
    //   return (
    //     <div style={{ padding: '10px' }}>
    //       <a-row type="flex" justify="end">
    //         <a-col>
    //           <a-select
    //             size="small"
    //             dropdownMatchSelectWidth={false}
    //             class="my-year-select"
    //             onChange={newYear => {
    //               console.log(newYear);
    //               const now = value.clone().year(newYear);
    //               console.log(now);
    //               onChange(newYear);
    //             }}
    //             value={nowDate}
    //           >
    //             {options}
    //           </a-select>
    //         </a-col>
    //       </a-row>
    //     </div>
    //   );
    // }
  }
};
</script>
<style lang="less">
.HCalendar {
  .date {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    >div {
      width: 34px;
      height: 34px;
      border-radius: 100%;
      line-height: 34px;
      margin: 0 auto;
    }
  }
  .canclick {
    cursor: pointer;
  }
  td.ant-fullcalendar-cell {
    padding: 0 !important;
    // height: 12px;
  }
  .ant-fullcalendar {
    border: 1px solid #E9EDF3;
    border-radius: 5px;
  }
  .ant-fullcalendar-calendar-body {
    padding: 8px 10px;
  }
  .dd-disabled {
    color: #c5c5c5;
  }
  .ant-fullcalendar th {
    font-size: 20px;
    font-weight: 400;
    color: #333;
    height: 30px;
    padding-bottom: 8px;
  }
  .date-type-list {
    display: flex;
    margin-top: 17px;
    position: relative;
    > div {
      display: flex;
      align-items: center;
      margin-right: 30px;
      .circle {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin-right: 5px;
      }
    }
    .date-look-all {
      position: absolute;
      right: 0;
      bottom: -4px;
    }
  }
}
</style>
